<template>
  <div>
     <el-select
    v-model="fileng.roleIds"
    multiple
    collapse-tags
    style="margin-left: 20px;"
     ref="multiSelect"
    @change="aaa"
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <div slot="footer" class="dialog-footer">
    <el-button size="small" @click="quxiao">取 消</el-button>
    <el-button size="small" type="primary" @click="queding">确 定</el-button>
  </div>
  </div>
</template>

<script>
import {bound,character} from '@/api/limits'
export default {
    props:{
    childata:{
       type: Object,
      require: true
    },
    },
 data() {
      return {
        options: [],
       show:true,
        q:{
          index:1,
          size:10
        },
        fileng:{
      shopId: '',
      roleIds: []
         }
      }
    },
    created(){
      this.loadingehc()
    },
    methods:{
     async loadingehc(){
       const res = await character(this.q)
       for(let i = 0; i < res.data.data.length; i++){
        this.options.push({value:res.data.data[i].id,label:res.data.data[i].name})
       }
       this.fileng.shopId = this.childata.id
      },
      aaa(){
         this.$refs.multiSelect.blur()
      },
      // 取消
      quxiao(){

        this.$emit('close')
      },
      // 确定
     async queding(){
        const rea = await bound(this.fileng)
        this.$message.success(rea.msg)

        this.$emit('close')
      }
    }
}
</script>

<style scoped>
.el-select{
  width: 90%;
}
.dialog-footer{
 width: 45%;
 margin-left: 60%;
 margin-top: 20px;
}
</style>